import React from 'react'
import { Link } from 'react-router-dom'
import '../assets/css/search.css'
import { LeftOutlined } from '@ant-design/icons';
import { getList } from '../request/api.js'



export default class Ass extends React.Component {
    constructor() {
        super()
        this.state = {
            rist: []
        }
    }
    componentDidMount() {
        getList().then(res => {
            console.log(res);
            if (res.code == 200) {
                this.setState({
                    rist: res.list
                })
            }
        })
    }
    render() {
        const { rist } = this.state
        console.log(rist);
        return (
            <div id="page">
                <header>
                    <div className="tu_box">
                        <span className="iconfont icon-arrow-right"><LeftOutlined /></span>
                        <h2 className='h2'>小u优选</h2>
                        <div className="tu_box_you">
                        </div>
                    </div>
                    <div className="tu_box1">
                        <input type="text" className="iconfont" placeholder="&#xe618; 按内容搜索" />
                    </div>
                    <ul>
                        <li className="li3">
                            综合推荐
                        </li>
                        <li className="li3">销量</li>
                        <li className="li1 li3">
                            <span>价格</span>
                            <i className="iconfont icon-shangxiajiantou"></i>
                        </li>
                        <li className="li3">好评度</li>
                        <li className="li3">店铺</li>
                        <li className="li2">
                            <i className="iconfont icon-shaixuan"></i>
                            <span>筛选</span>
                        </li>
                    </ul>
                </header>
                <div className="box2">
                    <h2>筛选11.11大促商品</h2>
                </div>

                {
                    rist.map((item) => {
                        return <div className="box3" key={item.id}>
                            <Link to={'/detail'} state={{id:item.id}} className='box3'>
                                {console.log(item.id)}
                            <div className="box3_1">
                                <img src={item.img} alt="" />
                            </div>
                            <div className="box3_2">
                                <h3>
                                    {item.goodsname}
                                </h3>
                                <p className="p1">
                                    {item.description}
                                </p>
                                <p className="p2">
                                    <span className="span1">￥</span><span className="span2">{item.price}</span><s>￥{item.market_price}</s><span className="span3">999人已付款</span>
                                </p>
                                <div className="box3_3">
                                    11.11限时299元起
                                </div>
                                <p className="p3">
                                    <span className="span4">999条评论</span>
                                    <span>99.9%好评</span>
                                </p>
                            </div>
                            </Link>
                        </div>
                    })
                }
                <div className="box4"><img src="./images/img/黑线.png" alt="" /></div>
            </div>
        )
    }

}
